<script setup lang="ts">
import * as yup from 'yup';
import { ApiFinanceMethodComboListV2, ApiFinanceThirdDeposit, ApiPaymentDepositBankApplication, ApiPaymentDepositBankCancel, ApiPaymentDepositBankConfirm, ApiPaymentDepositBankList } from '~/apis/index';
const { t, locale } = useI18n();
const appStore = useAppStore()
const router = useRouter()
import { Form } from 'vee-validate';
// const { openNotify } = useNotify()
const { currentGlobalCurrency, userInfo, isLogin, isCompleteKYC, uPayBalance, readyGetUpayBalance, loadingUpayBalance, loadingUpayUrl, upayBalErrCode, uPayUrl } = storeToRefs(appStore)
const { isKYCVerifyOpen } = storeToRefs(useBrandStore())
const { toFixedByLockCurrency } = useMiniGameLockCurrency()
const { depositCurrencyList, runGetFinanceDepositCurrencyData } = useCurrencyData()
defineOptions({
  name: 'AppRechargeWithLawCurrency',
})
enum SheetType {
  CURRENCY = 1,
  MERCHANT
}
enum PaymentType {
  ONLINE = 1,
  WALLET
}
enum ChargeStep {
  CHOOSE_MERCHANT = 1,
  INPUT_AMOUNT,
  TARGET_ACCOUNT
}
const showSheet = ref(false)
const showSheetType = ref<SheetType>(SheetType.CURRENCY)
const rechargeSubmitLoading = ref(false)
const selectedCurrency = ref()
const merchantsList = ref()
const selectedMerchant = ref()
const depositName = ref('')
const merchantGroupId = ref()
const curPaymentBank = ref()
const depositFormRef = ref()
const uPayPwd = ref('')
const selectedMerchantPaymentType = ref()
const chargeStep = ref<ChargeStep>(ChargeStep.CHOOSE_MERCHANT)
const amount = ref()
const { isZhcn, isPtbr, currentLangZone, userLanguage } = storeToRefs(useLanguageStore())
const paymentType = ref<PaymentType>(PaymentType.ONLINE) //法币支付类型：1.在线支付，2.钱包支付
/** 支付方式&协议V2列表 */
const {
  runAsync: runAsyncPaymentMethodList,
  data: paymentMethodList,
} = useRequest(ApiFinanceMethodComboListV2, {
  onSuccess() {
  },
})
/** 当前的充值优惠 */
const activeDepositPromo = ref('0.00')

// runAsyncPaymentMethodList({currency_id: getCurrencyConfig(currentGlobalCurrency.value).cur})
await application.allSettled([
  runAsyncPaymentMethodList({ currency_id: getCurrencyConfig(currentGlobalCurrency.value).cur }),
])

/** 公司入款存款-我已存款 */
const { run: runPaymentDepositBankConfirm, loading: paymentDepositBankConfirmLoading } = useRequest(ApiPaymentDepositBankConfirm, {
  onSuccess() {
    // showNotify()
    chargeStep.value = ChargeStep.INPUT_AMOUNT
  },
})
/** 公司入款存款-取消存款 */
const { run: runPaymentDepositBankCancel, loading: paymentDepositBankCancelLoading } = useRequest(ApiPaymentDepositBankCancel, {
  onSuccess() {
    chargeStep.value = ChargeStep.INPUT_AMOUNT
  },
})

/** 内嵌模式 upay */
const isEmbedUPay = computed(() => !!(selectedMerchant.value && selectedMerchant.value.embedded && +selectedMerchant.value.embedded === 1))

const schema = computed(() => yup.object().shape({
  depositName: paymentType.value === PaymentType.ONLINE && selectedMerchantPaymentType.value === 2 ? yup.string().required(t('recharge_username_placeholder')) : yup.string(),
  uPayPwd: isEmbedUPay.value ? yup.string().required('密码不能为空') : yup.string(),
  amount: selectedMerchant.value?.amount_type === 2 ? yup.number()
    .transform((value: string) => (!value ? undefined : Number(value)))
    .required(t('recharge_amount_placeholder'))
    .min(selectedMerchant.value?.amount_min, t('min_amount', {amount: selectedMerchant.value?.amount_min}))
    .max(selectedMerchant.value?.amount_max, t('max_amount', {amount: selectedMerchant.value?.amount_max})) : yup.string().required(t('recharge_amount_select_placeholder'))
}));

// const { resetForm } = useForm({
//   validationSchema: schema,
//   initialValues: {
//     depositName: '',
//     uPayPwd: '',
//     amount: ''
//   }
// })

/** 法币列表 */
const currencyList = computed(() => {
  if (depositCurrencyList.value) {
    return depositCurrencyList.value.filter((a) => !application.isVirtualCurrency(a.currency_name)).map((b) => {
      return {
        ...b,
        label: b.currency_name,
        value: b.currency_name,
      }
    })
  }
  return []
})

const curDepositPromo = computed(() => paymentMethodList.value?.method.find(item => item.id === merchantGroupId?.value)?.deposit_promo)

/** 充值优惠列表 */
const depositPromoArray = computed(() => {
  if (curDepositPromo.value && curDepositPromo.value.length > 0) {
    return curDepositPromo.value.map((i) => {
      return {
        ...i,
        label: i.max,
        value: i.max,
        bonus: i.bonus_max,
      }
    })
  }
  else {
    return []
  }
})

function promoAmount(amount: number) {
  const bonusMax = depositPromoArray.value.length > 0 ? Number.parseFloat(depositPromoArray.value?.[depositPromoArray.value.length - 1].bonus_max) : 0
  const _amount = amount as number
  if (_amount > 0 && depositPromoArray.value.length > 0) {
    if (_amount >= Number.parseFloat(depositPromoArray.value?.[depositPromoArray.value.length - 1].min)) {
      if (depositPromoArray.value.length > 0 && bonusMax > 0) {
        const ratio = Number.parseFloat(depositPromoArray.value?.[0].ratio)
        return ratio * _amount > bonusMax ? bonusMax : ratio * _amount
      }
      else if (depositPromoArray.value.length > 0 && bonusMax === 0) {
        const ratio = Number.parseFloat(depositPromoArray.value?.[0].ratio)
        return ratio * _amount
      }
      else {
        return 0.00
      }
    }
    else {
      return 0.00
    }
  }
  else {
    return 0.00
  }
}

watch(amount, (a) => {
  if (Number.isNaN(Number(a)))
    return
  activeDepositPromo.value = toFixedByLockCurrency(promoAmount(Number.parseFloat(a)).toString(), selectedCurrency.value.currency_name)
})

/** 银行列表请求 */
const {
  run: runPaymentDepositBankList,
  data: paymentDepositBankList,
} = useRequest(ApiPaymentDepositBankList)
/** 第三方支付存款 */
const {
  runAsync: runAsyncThirdDeposit,
  loading: thirdDepositLoading,
} = useRequest(ApiFinanceThirdDeposit)
/** 公司入款存款 */
const {
  runAsync: runPaymentDepositBankApplication,
  data: paymentDepositBankInfo,
  loading: paymentDepositBankInfoLoading,
} = useRequest(ApiPaymentDepositBankApplication, {
  onSuccess() {
  },
})

/** 获取图标路径 */
function getMerchantsIconPath(type: number, item: Merchants) {
  if(paymentType.value === PaymentType.ONLINE){
    let str = (item as { alias: string }).alias
    if (str === 'qb') {
      str = item.zk_id
      return `/payment/deposit/${str}.webp`
    }
    else {
      return type === 2 ? `/webp/bank/${str}.webp` : `/payment/deposit/${str ?? 'dft'}.webp`
    }
  }else{
    return type === 2 ? `/webp/bank/${item.zk_id}.webp` : `/payment/deposit/${item.zk_id ?? 'dft'}.webp`
  }
}

const uPayBalanceNum = computed(() => uPayBalance.value?.Balance)

async function depositSubmit() {
  const { values } = depositFormRef.value
  /** 增加自我排除逻辑 */
  if (userInfo.value?.exclude === 1) {
    message.error(t('exclude_off_notify'))
    return
  }
  /** 增加kyc逻辑 */
  if (isLogin.value && isKYCVerifyOpen.value && !isCompleteKYC.value)
    return

  /** 进行请求 */
  if (selectedMerchant.value?.bankcard_id) { // 公司入款存款
    await runPaymentDepositBankApplication({
      amount: values.amount,
      cid: selectedMerchant.value?.id ?? '',
      mid: selectedMerchant.value?.id ?? '',
      currency_id: selectedCurrency.value?.currency_id,
      currency_name: selectedCurrency.value?.currency_name,
      realname: values.depositName,
      bankcard_id: selectedMerchant.value?.bankcard_id ?? '',
    })
    chargeStep.value = ChargeStep.TARGET_ACCOUNT
  }
  else { // 三方支付存款
    if (isEmbedUPay.value) {
      if(!uPayBalance.value){
        message.error(t('insufficient_balance'))
        return
      }
      if (uPayBalanceNum.value && +uPayBalanceNum.value > 0) {
        rechargeSubmitLoading.value = true
          await runAsyncThirdDeposit({
            amount: values.amount, // 存款金额
            cid: selectedMerchant.value?.id ?? '', // 支付通道ID
            mid: selectedMerchant.value, // 支付方式ID
            bank_code: curPaymentBank.value, // 银行编号
            currency_id: selectedCurrency.value.currency_id, // 当前货币ID
            currency_name: selectedCurrency.value.currency_name, // 当前货币名称
            extra: values.uPayPwd,
          }).then((data: string) => {
            rechargeSubmitLoading.value = false
          // upay 不用打开窗口，status true 提示 下单成功就行
          // setTimeout(() => {
          //   appStore.runGetUpayBalance()
          // }, 1000)
          }).catch((err) => {
            try {
              // const msg = JSON.parse(err?.message)
              // if (msg && msg.data && msg.data === '5023')
              //   goBuyUpay()
            }
            catch {

            }
          })
        }
        else {
          // openNotify({
          //   type: 'error',
          //   title: t('deposit_fail'),
          //   message: t('balance_not_enough'),
          // })
          // goBuyUpay()
        }
      return
    }
    if (isMiBrowser()) {
      await runAsyncThirdDeposit({
        amount: values.amount, // 存款金额
        cid: selectedMerchant.value?.id ?? '', // 支付通道ID
        mid: selectedMerchant.value?.id, // 支付方式ID
        bank_code: curPaymentBank.value, // 银行编号
        currency_id: selectedCurrency.value.currency_id, // 当前货币ID
        currency_name: selectedCurrency.value.currency_name, // 当前货币名称
      }).then((data: string) => {
        window.open(data, '_blank')
      })
    }
    else {
      const newWindow = window.open('', '_blank')
      if (!newWindow)
        return
      await runAsyncThirdDeposit({
        amount: values.amount, // 存款金额
        cid: selectedMerchant.value?.id ?? '', // 支付通道ID
        mid: selectedMerchant.value?.id, // 支付方式ID
        bank_code: curPaymentBank.value, // 银行编号
        currency_id: selectedCurrency.value.currency_id, // 当前货币ID
        currency_name: selectedCurrency.value.currency_name, // 当前货币名称
      }).then((data) => {
        /* closeCurDialog()
      Local.set(STORAGE_FIAT_CURRENCY_DEPOSIT_URL, data)
      router.push('/deposit-details') */
        newWindow.location.href = data
      }).catch(() => newWindow.close())
    }
  }
  // resetForm()
}

/** 在中文状态下，过滤法币里的钱包支付列表 */
const filterWalletPaymentList = computed(() => {
  if (isZhcn.value)
    return paymentMethodList.value?.method ? paymentMethodList.value.method.filter(a => a.alias !== 'qb') : []
  else
    return paymentMethodList.value?.method ? paymentMethodList.value.method : []
})

/** 只有一个支付方式 */
const isOnlyOnePaymentMethod = computed(() => paymentMethodList?.value?.method?.length === 1)

watch(() => currencyList, () => {
  const currency = currencyList.value.find(item => item.currency_name === currentGlobalCurrency.value)
  currency && selectCurrencyOrMerchant(currency as Currency, SheetType.CURRENCY, false)
}, { immediate: true })

// watch(() => chargeStep.value, () => {
//   if(chargeStep.value === ChargeStep.CHOOSE_MERCHANT){
//     amount.value = null
//     depositName.value = ''
//   }
// })

const getAmountLimit = computed(() => {
  return `${selectedMerchant.value?.amount_min}-${selectedMerchant.value?.amount_max}`
})

const onlinePaymentMerchants = computed(() => {
  if (filterWalletPaymentList.value.length > 0) {
    if (isOnlyOnePaymentMethod.value) {
      return filterWalletPaymentList.value.map((a) => {
        return {
          ...a,
          merchants: a.merchants
        }
      })
    }
    else {
      return filterWalletPaymentList.value.map((a) => {
        return {
          ...a,
          merchants: a.merchants
        }
      })
    }
  }

  return []
})

const walletPaymentMethodList = computed(() => {
  if (paymentMethodList.value?.method && paymentMethodList.value.method.length > 0)
    return paymentMethodList.value.method.filter(a => a.alias === 'qb')
  else
    return []
})

const walletPaymentMerchants = computed(() => {
  if (walletPaymentMethodList.value && walletPaymentMethodList.value.length > 0) {
    return walletPaymentMethodList.value.map((a) => {
      return {
        ...a,
        merchants: a.merchants,
      }
    })
  }
  return []
})

const strToArray = function (amount: string) {
  const temp = amount.split(',').filter(str => str.trim() !== '')
  return temp.map((i) => {
    return {
      label: i,
      value: i,
    }
  })
}

/** 常用金额 */
const amountList = computed(() => {
  return strToArray(selectedMerchant.value?.often_amount ?? '')
})

function selectCurrencyOrMerchant(item: Merchant | Currency, type: SheetType, isShowSheet = true) {
  selectedMerchant.value = ''
  activeDepositPromo.value = '0.00'
  amount.value = ''
  if(type === SheetType.CURRENCY){
    selectedCurrency.value = item
    setTimeout(() => {
      showSheet.value = isShowSheet
      showSheetType.value = SheetType.MERCHANT
    }, 85)
    chargeStep.value = ChargeStep.CHOOSE_MERCHANT
    runAsyncPaymentMethodList({ currency_id: selectedCurrency.value.currency_id })
  }else {
      setTimeout(() => {
        showSheet.value = false
      }, 50)
    selectedMerchant.value = item
    runAsyncPaymentMethodList({ currency_id: selectedCurrency.value.currency_id, contract_id: selectedMerchant.value?.value })
    // updateVirAddress()
  }
}
/** 是否已经绑定 upay 账号 */
const hasBindUpayAccount = computed(() => true)

let upayRefreshTimer: any
/** 内嵌模式 upay */
const isEmbed = computed(() => !!(selectedMerchant.value && selectedMerchant.value.embedded && +selectedMerchant.value.embedded === 1))

function refreshUpayBalance() {
  if (loadingUpayBalance.value || loadingUpayUrl.value)
    return
  if (readyGetUpayBalance.value) {
    clearTimeout(upayRefreshTimer)
    upayRefreshTimer = setTimeout(() => {
      appStore.runGetUpayBalance()
    }, upayBalErrCode.value === '5024' ? 2000 : 0)
  }
}

function goBuyUpay() {
  if (loadingUpayUrl.value)
    return

  if (readyGetUpayBalance.value && hasBindUpayAccount.value) {
    let newWindow: any
    if (!isMiBrowser())
      newWindow = window.open('', '_blank')
    appStore.runGetUpayUrl().then((uu) => {
      console.log('uPayUrl.value === ', uPayUrl.value, uu)

      if (isMiBrowser()) {
        window.open(uu)
      }
      else {
        if (!newWindow)
          return
        newWindow.location.href = uu ?? ''
      }
    })
  }
  else {
  }
}

function selectMerchant(val: Merchant, merchantGroup: MerchantGroup){
  selectedMerchantPaymentType.value = merchantGroup.payment_type
  merchantGroupId.value = merchantGroup.id
  chargeStep.value = ChargeStep.INPUT_AMOUNT
  selectedMerchant.value = val
  const list = paymentType.value === PaymentType.ONLINE ? onlinePaymentMerchants.value : walletPaymentMerchants.value
  merchantsList.value = list.find(item => item.merchants.filter(merchant => merchant.id === selectedMerchant.value.id).length > 0)?.merchants || []
}

const hasMerchants = computed(() => (onlinePaymentMerchants.value?.length && paymentType.value === PaymentType.ONLINE) || (walletPaymentMerchants.value?.length && paymentType.value === PaymentType.WALLET))



await application.allSettled([
  appStore.runAsyncCnyPayCombo()
])


</script>

<template>
  <AppBaseCard>
    <div class="flex items-center">
      <div class="flex-1">{{t('recharge_currency')}}</div>
      <BaseInput class="flex-1" @click="showSheet = true; showSheetType = SheetType.CURRENCY" name="amount" :placeholder="getAmountLimit" :modelValue="selectedCurrency?.currency_name" type="select">
        <template v-slot:left-icon>
          <AppCurrencyIcon class="size-[1.25rem]" :currency-type="getCurrencyConfigByCode(selectedCurrency?.currency_id)?.['name']"/>
        </template>
      </BaseInput>
      <BaseSheet
          v-model="showSheet"
          :title="showSheetType === SheetType.CURRENCY ? t('recharge_pay_method') : t('recharge_choose_currency')"
          :showSearch="showSheetType === SheetType.CURRENCY"
          :filterKey="showSheetType === SheetType.CURRENCY ? 'currency_name' : 'name'"
          :items="showSheetType === SheetType.CURRENCY ? currencyList : merchantsList"
        >
          <template v-slot="{ item }">
            <li
              class="mx-[0.875rem] h-[2.5rem] px-[0.5rem] rounded-[0.375rem] flex items-center justify-between"
              :class="[showSheetType === SheetType.CURRENCY ? 
              (item.currency_id === selectedCurrency?.currency_id && 'bg-bg-black-4'):
              (item.id === selectedMerchant.id && 'bg-bg-black-4')]"
              @click="selectCurrencyOrMerchant(item, showSheetType, false)"
            >
              <div class="flex items-center gap-3">
                <!-- 货币图标 -->
                <AppCurrencyIcon class="size-[1.25rem]" v-if="showSheetType === SheetType.CURRENCY" :currency-type="getCurrencyConfigByCode(item.currency_id)?.['name']" />
                <BaseImage width="1.125rem" height="1.125rem" :url="getMerchantsIconPath(selectedMerchantPaymentType, item)" is-network v-else/>
                <span class="font-medium text-text-white-1 text-[1rem] ml-[.5rem]">{{ item.currency_name || item.label || item.name }}</span>
              </div>
              <span class="text-text-white-1 text-[1rem]" v-if="showSheetType === SheetType.CURRENCY">{{ item.amount }}</span>
              <div class="size-[1rem] border-[.1875rem] border-brand rounded-[50%]"
                v-if="showSheetType === SheetType.MERCHANT && item.id === selectedMerchant.id"></div>
            </li>
          </template>
      </BaseSheet>
    </div>
    <div class="bg-bg-black-3 px-[.75rem] py-[.5rem] flex gap-[.8125rem] mt-[1rem] rounded-[.5rem]" v-show="chargeStep !== ChargeStep.TARGET_ACCOUNT">
      <div class="font-[600] flex-1 h-[2rem] text-[.75rem] center rounded-[.25rem] text-text-white-2" :class="[paymentType === PaymentType.ONLINE && 'bg-bg-black-5 !text-text-white-0']" @click="paymentType = PaymentType.ONLINE; chargeStep = ChargeStep.CHOOSE_MERCHANT">{{t('recharge_online_payment')}}</div>
      <div class="font-[600] flex-1 h-[2rem] text-[.75rem] center rounded-[.25rem] text-text-white-2" :class="[paymentType === PaymentType.WALLET && 'bg-bg-black-5 !text-text-white-0']" @click="paymentType = PaymentType.WALLET; chargeStep = ChargeStep.CHOOSE_MERCHANT">{{t('recharge_wallet_payment')}}</div>
    </div>
    <template v-if="chargeStep === ChargeStep.CHOOSE_MERCHANT">
      <BasePaymentMerchant :merchantGroups="onlinePaymentMerchants" @change="selectMerchant" v-if="onlinePaymentMerchants?.length && paymentType === PaymentType.ONLINE"></BasePaymentMerchant>
      <BasePaymentMerchant :merchantGroups="walletPaymentMerchants" @change="selectMerchant" v-if="walletPaymentMerchants?.length && paymentType === PaymentType.WALLET" showAll></BasePaymentMerchant>
      <AppRechargeTip v-if="hasMerchants">
        <span class="text-function-green">{{t('common_on')}}</span>
        <span class="underline mr-[.5rem] text-function-green" @click="router.push('setting/two-factor-auth')">2FA</span>
        <span class="text-text-white-2">{{ t('recharge_2fa_tip') }}</span>
      </AppRechargeTip>
      <BaseEmpty v-if="!hasMerchants"/>
    </template>
    <template v-if="chargeStep === ChargeStep.INPUT_AMOUNT">
      <Form  @submit="depositSubmit" :validation-schema="schema" ref="depositFormRef">
        <BaseInput :label="t('recharge_choose_payment')" class="flex-1 my-[1rem]" @click="showSheet = true; showSheetType = 2" name="merchant" :modelValue="selectedMerchant?.name" type="select">
          <template v-slot:left-icon>
            <BaseImage width="1.125rem" height="1.125rem" :url="getMerchantsIconPath(selectedMerchantPaymentType, selectedMerchant)" is-network/>
          </template>
        </BaseInput>
        <div v-if="isEmbed" class="flex items-center justify-between mt-[.5rem]">
          <div class="flex items-center text-[14px] gap-[.25rem]" @click="refreshUpayBalance">
            <span class="text-text-white-2 text-[.75rem] font-[700]">{{ t('u_pay_balance') }}</span>
            <div v-if="readyGetUpayBalance" class="text-white flex gap-[.25rem]">
              <AppCurrencyIcon class="size-[1.125rem]" :currency-type="getCurrencyConfigByCode(selectedCurrency?.currency_id)?.['name']"/>
              <span class="text-function-red">{{ Number(uPayBalance?.Balance) || '0.00' }}</span>
            </div>
            <span v-else class="text-tg-text-white">{{ t('get_fail') }}</span>
            <div class="flex cursor-pointer items-center justify-center">
              <BaseIcon name="uni-refresh" size='1.125rem' :class="{'animate-spin': loadingUpayBalance || loadingUpayUrl}"/>
            </div>
          </div>
          <BaseButton :loading="loadingUpayUrl"  @click="goBuyUpay" html-type="button" type="secondary" class="w-[5.125rem] h-[1.75rem] text-[.75rem] text-brand rounded-[.25rem]">
            <BaseIcon name="uni-plus" class="!text-brand size-[.75rem]" />
            {{ readyGetUpayBalance && hasBindUpayAccount ? t('buy_u_coin') : t('bind_account') }}
          </BaseButton>
        </div>
        <BaseInput :modelValue="depositName" name="depositName" v-if="paymentType === PaymentType.ONLINE && selectedMerchantPaymentType === 2" :label="t('recharge_username')" class="mt-[1rem]" :placeholder="t('recharge_username_placeholder')">
        </BaseInput>
        <BaseInput class="mt-[1rem]" :label="t('recharge_amount')" :disabled="selectedMerchant.amount_type === 1" name="amount" :placeholder="selectedMerchant.amount_type === 1 ? t('recharge_amount_select_placeholder') : getAmountLimit" :modelValue="amount">
            <template v-slot:right-icon>
              <div class="text-brand text-[1rem] font-[700]">{{t('recharge_discount')}}+{{ activeDepositPromo }}</div>
            </template>
        </BaseInput>
        <BaseInput v-if="isEmbedUPay" :modelValue="uPayPwd" class="mt-[1rem]" :label="t('U_coin_password')" :disabled="selectedMerchant.amount_type === 1" name="uPayPwd" :placeholder="t('U_coin_password_placeholder')" type="password">
        </BaseInput>
        <div class="grid grid-cols-3 gap-y-[.375rem] gap-x-[.4375rem] mt-[.75rem]">
            <div v-for="num in amountList" :key="num.value" class="bg-bg-black-10 rounded-[.25rem] h-[2.625rem] flex justify-center items-center font-[600] text-[1rem]" :class="[num.value === amount && 'border border-brand']" @click="amount = num.value">{{ num.value }}</div>
        </div>
        <BaseButton class="w-full h-[2.5rem] mt-[1rem]" html-type="submit" :loading="paymentDepositBankInfoLoading">
          <span class="text-text-black-10 text-[.75rem] mr-[.25rem]">{{t('recharge_confirm_pay')}}</span>
          <BaseIcon name="uni-share" class="text-text-black-10" />
        </BaseButton>
      </Form>
    </template>
    <template v-if="chargeStep === ChargeStep.TARGET_ACCOUNT">
      <BaseInput :modelValue="paymentDepositBankInfo?.bankcard?.open_name" name="" disabled showCopy :label="t('recharge_target_account_username')" class="mt-[1rem]">
      </BaseInput>
      <BaseInput :modelValue="paymentDepositBankInfo?.bankcard?.bank_account" name="" showCopy disabled :label="t('recharge_target_account')" class="mt-[1rem]">
      </BaseInput>
      <BaseInput :modelValue="paymentDepositBankInfo?.bankcard?.bank_area_cpf" name="" disabled showCopy v-if="chargeStep === ChargeStep.TARGET_ACCOUNT" :label="t('recharge_target_account_address')" class="mt-[1rem]">
      </BaseInput>
      <BaseInput :modelValue="paymentDepositBankInfo?.bankcard?.bank_id" name="" showCopy disabled v-if="chargeStep === ChargeStep.TARGET_ACCOUNT" :label="t('recharge_target_account_bank')" class="mt-[1rem]">
        <template v-slot:left-icon>
          <AppCurrencyIcon class="size-[1.25rem]" v-if="showSheetType === SheetType.CURRENCY" :currency-type="getCurrencyConfigByCode(selectedCurrency.currency_id)?.['name']" />
        </template>
      </BaseInput>
      <BaseInput :modelValue="paymentDepositBankInfo?.amount" name="" disabled v-if="chargeStep === ChargeStep.TARGET_ACCOUNT" showCopy :label="t('recharge_amount')" class="mt-[1rem]">
      </BaseInput>
      <AppRechargeTip v-if="chargeStep === ChargeStep.TARGET_ACCOUNT" :text="t('recharge_check_tip')"/>
      <div class="flex gap-[.625rem]" v-if="chargeStep === ChargeStep.TARGET_ACCOUNT">
        <BaseButton :loading="paymentDepositBankCancelLoading" @click="runPaymentDepositBankCancel({ id: paymentDepositBankInfo?.id ?? '' })" class="w-full h-[2.5rem] mt-[1rem] text-text-black-10 text-[.75rem]" type="secondary">
          {{t('recharge_cancel')}}
        </BaseButton>
        <BaseButton :loading="paymentDepositBankConfirmLoading" @click="runPaymentDepositBankConfirm({ id: paymentDepositBankInfo?.id ?? '' })" class="w-full h-[2.5rem] mt-[1rem] text-text-black-10 text-[.75rem]">
          {{t('recharge_paid')}}
        </BaseButton>
      </div>
    </template>
  </AppBaseCard>
  

</template>
